<template>
  <div>
    <el-button @click="reset">还原xxx</el-button>
    <hr>
    <Xxx v-if="bol" />
    <hr>
    <h2 v-if="show">{{ obj }}</h2>
    <el-button @click="setObj">修改obj</el-button>
    <!-- 静默刷新
            1：组件还原
            2：如果数据改变了，但页面没有渲染，直接使用静默刷新就可以解决
     -->
  </div>
</template>
<script>
import Xxx from './components/xxx'
export default {
  components: {
    Xxx
  },
  data() {
    return {
      bol: true,
      obj: { a: 1 },
      // vue2:对象新增属性它并不是响应式的
      show: true
    }
  },
  methods: {
    reset() {
      // 静默刷新
      this.bol = false
      this.$nextTick(() => {
        this.bol = true
      })
    },
    setObj() {
      this.obj.b = Math.random() * 999
      console.log(this.obj)
      this.show = false
      this.$nextTick(() => {
        this.show = true
      })
    }
  }
}
</script>
<style></style>
